<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="get">get</button>
    <button class="post">post</button>
</body>
<script>
    /*
        http get和post的区别
        1. 一般情况下 get常用于获取数据, post常用于发送数据  =>   get也可以在请求时携带数据(发送数据)
        2. 以get方式传递数据时,将参数数据队列拼接在地址栏之后,用 ? 分隔
           以post方式传递数据时,利用http post传输机制,将数据放在请求主体中在header传递,地址栏看不到
        3. 以get方式发送请求时,传输速度较快, post相对较慢
        4. 以get方式发送请求时 数据在地址栏可见, 安全性不高 , post存放请求主体中随header传递 安全性较高
        5. get方式传递数据时不能超过4k(中文可能会被编码)  post传递数据时默认不受限制


        get方式传参

        post方式传参
    */

    var get = document.getElementsByClassName("get")[0];
    var post = document.getElementsByClassName("post")[0];

    // 以get方式传递数据时,将参数数据队列拼接在地址栏之后,用 ? 分隔
    get.onclick = function () {

        // 第一个请求
        // 判断用户名是否存在?
        var wd = "";  // 搜素的关键词 默认请求所有
        var col = "id"; // 排序的列名 默认id排序
        var type = "asc"; // 排序的方式 默认升序
        var page = 1;  // 页码 默认显示第一页
        var size = 10; // 每页显示多少条 默认(10)



        var xhr = new XMLHttpRequest();

        xhr.open("get", `http://43.138.81.225/demo/php/searchGoodsOrderLimit.php?wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`, true);

        xhr.send();

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                result = JSON.parse(result);
                console.log(result);

            }
        }


    }


    post.onclick = function () {
        var user = "asd123123";
        var pwd = "123123";
        var phone = "17386151217";
        var email = "143123@qq.com";

        var xhr = new XMLHttpRequest();

        // 错误演示 => 不能以get方式 向post类型的接口传递数据
        // xhr.open("post", "http://43.138.81.225/demo/php/register.php?user=" + user + "&pwd=" + pwd + "&phone" + phone + "&email=" + email, true);
        // xhr.open("post", `http://43.138.81.225/demo/php/register.php?user=${user}&pwd=${pwd}&phone=${phone}&email=${email}`, true);



        // 以post方式传递数据时
        // 1. 将参数数据队列放到send()中 作为实际参数(请求主体)
        // 2. 设置请求头  => 将允许传输的数据类型改为FormData格式
        //  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        xhr.open("post", "http://43.138.81.225/demo/php/register.php", true);

        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(`user=${user}&pwd=${pwd}&phone=${phone}&email=${email}`);

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                console.log(result);
                var data = JSON.parse(result);
                console.log(data);
            }
        }

    }


</script>

</html>